<script setup>
import { ref } from 'vue'
import { ElRow, ElCol, ElCard, ElButton, ElInputNumber } from 'element-plus'
import { NavBar } from 'vant'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter()
const route = useRoute()
const id = Number(route.query.id)  // 确保 id 是数字
const token = ref(route.query.token)
const products = ref([])  // 将products初始化为空数组

console.log(typeof id, token.value)

function show() {
  axios.get(`http://localhost:8501/admin/product/product/productFindOne/${id}`, {
    headers: {
      token: token.value
    }
  }).then(res => {
    // 确保数据结构是数组
    if (Array.isArray(res.data.data)) {
      products.value = res.data.data;
    } else {
      products.value = [res.data.data];
    }
    products.value.forEach(item => {
      if (item.quantity === undefined || item.quantity === null) {
        item.quantity = 1;  // 设置默认数量为1
      }
    });
    console.log(res.data.data)
    console.log(products.value)
  }).catch(error => {
    console.error(error)
  })
}

function onClickLeft() {
  router.go(-1)
}

const dialogVisible1 = ref(false)
const dialogVisible2 = ref(false)
function openCart(item) {
  dialogVisible1.value = true
}
function buyNow(item) {
  dialogVisible2.value = true
  cart.value.receiverTagName = item.name
  axios.post("http://localhost:8501/order/save", cart.value, {
    headers: {
      token: token.value
    }
  }).then(res => {
    console.log()
    alert('购买成功')
  })
}
const cart = ref({
  name: '',
  num: '',
  price: ''
})

function addCart(item) {
  // 获取选择的数量
  console.log(`添加到购物车: ${item.name}, 数量: ${item.quantity}`)
  cart.value.name = item.name
  cart.value.num = item.quantity
  cart.value.price = item.category1Id
  cart.value.img = item.sliderUrls
  axios.post('http://localhost:8501/cart/save', cart.value, {
    headers: {
      token: token.value
    }
  }).then(res => {
    console.log(res)
    if (res.data.code === 200) {
      dialogVisible1.value = false
      dialogVisible2.value = false
      alert('添加成功')
    } else {
      alert('添加失败')
    }
  })
}

show()
</script>

<template>
  <el-dialog v-model="dialogVisible1" title="添加到购物车" width="40%">
    <el-row :gutter="20" class="product-list">
      <el-col :span="24" v-for="item in products" :key="item.id">
        <el-card :body-style="{ padding: '20px' }">
          <div class="product-details">
            <img :src="item.sliderUrls" class="product-image" />
            <h3>{{ item.name }}</h3>
            <p>规格: 默认</p>
            <p>单价: ￥{{ item.category1Id }}</p>
            <p>数量: {{ item.quantity }}{{ item.unitName }}</p>
            <el-input-number v-model="item.quantity" :min="1" label="数量" style="width: 100%;"></el-input-number>
            <p>总价: ￥{{ (isNaN(item.category1Id * item.quantity) || item.quantity <= 0) ? '0' : (item.category1Id * item.quantity).toFixed(2) }}</p>
            <el-button type="primary" size="small" style="text-align: right" @click="addCart(item)">提交订单</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-dialog>

  <el-dialog v-model="dialogVisible2" title="立即购买" width="40%">
    <el-row :gutter="20" class="product-list">
      <el-col :span="24" v-for="item in products" :key="item.id">
        <el-card :body-style="{ padding: '20px' }">
          <div class="product-details">
            <img :src="item.sliderUrls" class="product-image" />
            <h3>{{ item.name }}</h3>
            <p>规格: 默认</p>
            <p>单价: ￥{{ item.category1Id }}</p>
            <p>数量: {{ item.quantity }}{{ item.unitName }}</p>
            <el-input-number v-model="item.quantity" :min="1" label="数量" style="width: 100%;"></el-input-number>
            <p>总价: ￥{{ (isNaN(item.category1Id * item.quantity) || item.quantity <= 0) ? '0' : (item.category1Id * item.quantity).toFixed(2) }}</p>
            <el-button type="primary" size="small" style="text-align: right" @click="buyNow(item)">提交订单</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-dialog>

  <div class="app-header">
    <div class="van-nav-bar van-hairline--bottom">
      <div class="van-nav-bar__content">
        <NavBar left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="van-nav-bar__title van-ellipsis">商品详细</div>
      </div>
    </div>
  </div>

  <el-row :gutter="20" class="product-list">
    <el-col :span="24" v-for="item in products" :key="item.id">
      <el-card :body-style="{ padding: '20px' }">
        <div class="product-details">
          <img :src="item.sliderUrls" class="product-image" />
          <h3>{{ item.name }}</h3>
          <p>#{{ item.brandName }}#{{ item.category1Name }}#{{ item.category2Name }}#{{ item.category3Name }}</p>
          <p>价格: ￥{{ item.category1Id }}</p>
          <div class="divider-container">
            <hr class="custom-divider" />
            <span class="divider-text">猜你喜欢</span>
            <el-carousel :interval="5000" arrow="always" class="carousel">
              <el-carousel-item>
                <img src="https://www.helloimg.com/i/2025/02/08/67a70261845bf.jpg" alt="banner1" class="carousel-image" />
              </el-carousel-item>
              <el-carousel-item>
                <img src="banner2.jpg" alt="banner2" class="carousel-image" />
              </el-carousel-item>
              <el-carousel-item>
                <img src="https://www.helloimg.com/i/2025/02/08/67a70261845bf.jpg" alt="banner3" class="carousel-image" />
              </el-carousel-item>
            </el-carousel>
            <hr class="custom-divider" />
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <div class="button-container">
    <el-button class="fixed-button" type="primary" size="small" @click="openCart(item)">加入购物车</el-button>
    <el-button class="fixed-button" type="primary" size="small" @click="buyNow(item)">立即购买</el-button>
  </div>
</template>

<style scoped>
.carousel {
  width: 100%;
  height: 200px;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-divider {
  border: 0;
  height: 2px;
  background-color: #ccc;
  margin: 15px 0;
}

.divider-container {
  position: relative;
  text-align: center;
}

.product-image {
  width: 100%;
  height: 150px; /* 调整图片高度 */
  object-fit: cover;
  margin-bottom: 10px; /* 添加图片与详情信息的间距 */
}

.product-details {
  padding: 10px;
  text-align: left;
}

h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.el-button {
  width: 100%;
  height: 45px;
  font-size: 14px;
}

.el-input-number {
  width: 100%;
  margin-top: 10px;
}

.product-list {
  margin-top: 20px;
}

.button-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 999;
}

.fixed-button {
  font-size: 12px;
}

@media (max-width: 600px) {
  .el-col {
    padding: 5px;
    width: 100% !important;
  }

  .van-nav-bar__title {
    font-size: 14px;
  }

  .product-image {
    width: 100%;
    height: auto;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .el-col {
    width: 48% !important;
  }

  .product-details h3 {
    font-size: 14px;
  }
}

@media (min-width: 1025px) {
  .el-col {
    width: 23% !important;
  }

  .product-details h3 {
    font-size: 16px;
  }
}

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.van-nav-bar__content {
  padding: 10px;
}

body {
  padding-top: 60px;
}
</style>